<template>
    <div class="page-con">
        <div class="page-title fdisr">
            <div>{{ inputDisable && breakWhileError ? "本次记忆" : "当前" }}小数点后第<span style="color:#409eff;font-size: 46px;">{{
                memoryLimit
            }}</span> 位
            </div>
            <div class="fdisr" style="margin-left: 50px;">
                <el-switch v-model="breakWhileError" active-text="出错终止" inactive-text="出错继续"></el-switch>
            </div>
            <div class="fdisr" style="width:80%;height: 50px;justify-content: center;">
                <el-radio-group v-model="diffcultLevel" @change="onDiffLevelChange">
                    <el-radio-button label="10" name="10">基本认知</el-radio-button>
                    <el-radio-button label="50" name="50">芸芸众生</el-radio-button>
                    <el-radio-button label="150" name="150">突破自我</el-radio-button>
                    <el-radio-button label="1000" name="1000">永不止步</el-radio-button>
                    <el-radio-button label="2550" name="2550">挑战吉尼斯</el-radio-button>
                </el-radio-group>

            </div>
        </div>
        <div class="com-con">
            <div class="digit-con">
                <div class="tip-text"></div>
                <div class="static-value" style="border:none">
                    <span>3.</span>
                </div>
                <div class="tip-text"><span></span></div>
            </div>
            <div class="digit-con" v-for="num, nindex in pi">
                <div class="tip-text" style="margin-bottom: 5px;">
                    <span v-if="(nindex + 1) % 50 == 0 && nindex != 1" style="color:deepskyblue">{{ nindex + 1 }}</span>
                </div>
                <el-input v-model="inputValue" maxlength="1" @input="(e: string) => onValueInput(e, num)"
                    v-if="nindex == memoryLimit" ref="activeInput" :class="inputDisable ? 'error-input-bdr' : ''"
                    :disabled="inputDisable && breakWhileError"></el-input>
                <div class="static-value" v-else>
                    <span v-if="nindex < memoryLimit">{{ num }}</span>
                </div>
                <div class="tip-text"><span v-show="nindex < memoryLimit">{{ num }}</span></div>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { mapState, PiniaVuePlugin } from 'pinia';
import { useSomeStore } from '../../stores/somedata'
import { ref, nextTick, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
let pi = ref(useSomeStore().pi.slice(0, 150))
let inputMinLength: number = 10
let memoryLimit = ref(60)
let inputValue = ref("")
let activeInput = ref()
let inputDisable = ref(false)
let breakWhileError = ref(false)
let diffcultLevel = ref("150")

const onValueInput = (e: string, num: string) => {
    inputValue.value = e

    if (e != num) {
        if (breakWhileError.value) {
            ElMessageBox.confirm(`本次默写至圆周率后第${memoryLimit.value}未，请继续努力，是否重新开始？`, "默写出错", {
                distinguishCancelAndClose: true,
                confirmButtonText: '重新开始',
                cancelButtonText: '退出',
            }).then(() => {
                memoryLimit.value = 0
                nextTick(() => {
                    inputDisable.value = false
                    inputValue.value = ""
                    activeInput.value[0].focus()
                })

            }).catch(() => {
                nextTick(() => {
                    activeInput.value[0].blur()
                    inputDisable.value = true
                })
            })
        } else {
            ElMessage.warning("当前位数填写出错")
            nextTick(() => {
                inputDisable.value = true
            })
        }


        return
    }

    if (memoryLimit.value == parseInt(diffcultLevel.value) - 1) {
        memoryLimit.value++
        switch (diffcultLevel.value) {
            case "10":
                diffcultLevel.value = "50"
                ElMessage.success("你已进入芸芸众生之列")
                onDiffLevelChange("50")
                break;
            case "50":
                diffcultLevel.value = "150"
                ElMessage.success("恭喜，你已突破自我！")

                onDiffLevelChange("150")
                break;
            case "150":
                diffcultLevel.value = "1000"
                ElMessage.success("连圆周率都能记150位，生活中还会有什么难事吗？")
                onDiffLevelChange("1000")
                break;
            case "1000":
                diffcultLevel.value = "2550"
                onDiffLevelChange("2550")
                ElMessage.success("会当凌绝顶，一览众山小")
                break;
            case "2550":
                ElMessage.success("学海无涯")
                break;
        }
        if (diffcultLevel.value == "2550") return
        nextTick(() => {
            inputDisable.value = false
            inputValue.value = ""
            activeInput.value[0].focus()
        })


    } else {
        memoryLimit.value++
        nextTick(() => {
            inputDisable.value = false
            inputValue.value = ""
            activeInput.value[0].focus()
        })
    }


}

const onDiffLevelChange = (e: string) => {
    let maxPi = useSomeStore().pi

    pi.value = maxPi.slice(0, parseInt(e))


}

onMounted(() => {
    activeInput.value[0].focus()

    let someNum = 142857

    for (let i = 1; i < 8; i++) {
        console.log(i, someNum * i)
    }
})

</script>

<style lang="scss">
.page-con {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    color: black;

    .page-title {
        position: sticky;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 120px;
        // background-color: #409eff;
        z-index: 2;
        backdrop-filter: saturate(50%) blur(4px);
        background-image: radial-gradient(transparent 1px, #ffffff 1px);
        background-size: 4px 4px;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        letter-spacing: 6px;
        font-weight: 600;
        flex-wrap: wrap;
    }
}

.com-con {
    width: 80%;
    height: calc(100% - 120px);
    min-height: 600px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: 1;
    align-content: flex-start;
}

.digit-con {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 110px;
    // border: 2px solid #d6d6d6;
    border-radius: 6px;
    margin-left: 4px;

    .el-input {
        width: 50px;

        .el-input__wrapper {
            padding: 0px;
            // border: 2px solid black;
        }

        .el-input__wrapper,
        is-focus {
            box-shadow: none;
        }

        .el-input__inner {
            width: 50px;
            height: 60px;
            line-height: 60px;
            font-size: 30px;
            border-radius: 4px;
            text-align: center;
            border: 2px solid #409eff;
        }
    }

    .error-input-bdr {
        --el-input-focus-border-color: #F56C6C;

        .el-input__inner {
            outline-style: none;
            border: 2px solid #F56C6C !important;
            --el-input-focus-border-color: #F56C6C;

            &:focus {
                border: 2px solid #F56C6C !important;
            }
        }


    }

    .static-value {
        width: 50px;
        height: 60px;
        line-height: 60px;
        font-size: 30px;
        border: 2px solid #d6d6d6;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
    }

    .tip-text {
        height: 20px;
        width: 100%;
        text-align: center;
    }
}
</style>